<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="ljc">
    <title>路金产</title>
    <script src="js/jquery-3.1.1.js">
        
    </script>
    <style>
        html,body{
            height: 100%;
        }
        body{
            background-image: url(1.jpg);
            /*background-size:100% 100%;*/
        }
        ol{
            margin: -30px 200px;
        }
        a{
            color:mediumorchid;
        }
        ol>li{
            padding: 5px;
            width: 700px;
            height: 20px;
            font-size: 30px;
            margin: 20px;    
            font-size: 28px;   
        }
        li:hover{
            cursor: pointer;
        }
        a{
            text-decoration: none;
        }
        ul{
            list-style: none;
            margin: 100px 100px;
            position: relative;
        }
        ul>li{
            width: 200px;
            height: 50px;
            margin: 140px 100px;
            font-size: 24px;
            
          
        }
        p{
            opacity: 0.3;
            height: 40px;
            line-height: 40px;
              background-color: lightpink;
              text-align: center;
              border-radius: 10px;
        }
        ol{
            display: none;
            opacity: 0.6;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <p>作业</p>
            <ol>
                <li><a href="项目/千图网/index.html" target="_blank">千图网</a></li>
                <li><a href="项目/下拉菜单/index.html" target="_blank">下拉菜单</a></li>
                <li><a href="项目/jQuery选择器练习.html" target="_blank">jQuery选择器练习</a></li>
                <li><a href="项目/jq练习/1-订单.html" target="_blank">订单</a></li>
                <li><a href="项目/jq练习/2-选项卡.html" target="_blank">选项卡</a></li>
                <li><a href="项目/jq练习/3-下拉菜单.html" target="_blank">下拉菜单</a></li>
                <li><a href="项目/jq练习/4-模拟select.html" target="_blank">模拟菜单select</a></li>
                <li><a href="项目/217/1-鼠标放上去显示遮罩层.html" target="_blank">jQ鼠标放上去显示遮罩层</a></li>
                <li><a href="项目/217/2-轮播图.html" target="_blank">jQ轮播图</a></li>
                <li><a href="项目/217/3-五星好评.html" target="_blank">jQ五星好评</a></li>
                <li><a href="项目/217/4-上传图片.html" target="_blank">jQ上传图片</a></li>
                <li><a href="项目/217/5-点击加号上传图片.html" target="_blank">jQ点击加号上传图片</a></li>
                <li><a href="项目/217/6-弹窗.html" target="_blank">弹窗</a></li>
                <li><a href="项目/220/01-图片切换.html" target="_blank">图片切换</a></li>
                <li><a href="项目/220/02-图片翻转切换.html" target="_blank">图片翻转切换</a></li>
                <li><a href="项目/220/03-指定效果.html" target="_blank">置顶效果</a></li>
                <li><a href="项目/220/04-检测用户输入字数.html" target="_blank">检测用户输入字数</a></li>
                <li><a href="项目/220/05-商品筛选.html" target="_blank">商品筛选</a></li>
            </ol>   
        </li>
        <li>
            <p>项目</p>
            <ol>
                <li><a href="项目/小米商城/index.html">商城</a></li>
                <li><a href="201310913135/附表2：任务书.doc">任务书</a></li>
                <li><a href="201310913135/开题报告.pptx">开题报告</a></li>
            </ol>
        </li>
    </ul>
    
</body>
</html>
<script>
var a = true;
    $('ul>li').each(function(index){
        
        $(this).click(function(){
              $('ul>li').each(function(index){
                  $('ul>li').find('ol').hide();
              })          
            $(this).find('ol').show();        
        })
        })
   
      
    
    
</script>